<template>
  <div class="cover">
    <img class="bg" :src="bgUrl" alt="cover" />
    <!-- 滤镜层 -->
    <div
      :class="store.backgroundShow ? 'gray sm' : 'gray'"
      @click="store.clearsearch"
    />
    <transition name="el-fade-in-linear">
      <!-- 下载功能 -->
      <a
        class="down"
        :href="bgUrl"
        target="_blank"
        v-show="store.backgroundShow"
        >下载壁纸</a
      >
    </transition>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, h } from "vue";
import { homepage } from "@/store";
onMounted(() => {
  changeBg(store.imagetype);
});

const store = homepage();
// 刷新页面更改壁纸
let bgUrl = ref(null); //壁纸链接
const changeBg = (type) => {
  let num = Math.floor(Math.random() * 4 + 1);
  bgUrl.value = `/images/bg-${num}.webp`;
  store.$patch((state) => {
    state.currentimage = bgUrl.value
  });
};
</script>

<style lang="scss" scoped>
.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.25s;
  z-index: -2;
  .bg {
    transform: scale(1);
    filter: blur(0);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1.5s ease 0s;
    backface-visibility: hidden;
  }
  // 常态滤镜
  .gray {
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.5) 100%
      ),
      radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
    transition: 1.5s;
    // 预览解除滤镜
    &.sm {
      opacity: 0;
      transition: 1.5s;
    }
  }
  .down {
    font-size: 16px;
    color: white;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    padding: 20px 26px;
    border-radius: 8px;
    background-color: #00000030;
    width: 120px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      transform: scale(1.05);
      background-color: #00000060;
    }
    &:active {
      transform: scale(1);
    }
  }
}
</style>
